<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>21_条件-v-show的使用</title>
  <!-- 
  在 Vue 中， `v-show`  指令用于根据条件控制元素的显示与隐藏。与  `v-if`  不同， `v-show`  通过修改 CSS 的  `display`  属性来实现元素的可见性，而不会销毁或重建元素。
  1. 基本用法
  `v-show`  的基本语法如下：
  <template>
    <div>
      <p v-show="isVisible">这段文字只有在 isVisible 为 true 时才会显示。</p>
      <button @click="toggleVisibility">切换显示</button>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        isVisible: false,
      };
    },
    methods: {
      toggleVisibility() {
        this.isVisible = !this.isVisible;
      },
    },
  };
  </script>
  在这个例子中，当  `isVisible`  为  `true`  时，段落  `<p>`  会被显示；当  `isVisible`  为  `false`  时，段落会被隐藏，但仍然存在于 DOM 中。

  2. 与  `v-if`  的区别
  - 渲染方式： `v-if`  会根据条件的真假来销毁和重建元素，而  `v-show`  只是切换 CSS 的  `display`  属性。
  - 性能： `v-show`  的性能开销较小，适合频繁切换的场景；而  `v-if`  更适合条件变化较少的场景。
  - 初始渲染： `v-show`  会始终渲染元素（即使是隐藏的），而  `v-if`  在条件为  `false`  时不会渲染元素。

  3. 使用场景
  - 频繁切换的内容：当需要频繁切换显示状态的内容时，使用  `v-show`  会更高效。
  - 动态内容：在需要根据用户输入或其他条件动态显示内容时， `v-show`  是一种有效的选择。

  4. 注意事项
  - 初始状态：使用  `v-show`  时，元素会在初始渲染时被添加到 DOM 中，即使它是隐藏的。
  - CSS 影响：如果有其他 CSS 规则影响元素的显示，可能会干扰  `v-show`  的效果。

  5. 示例
  以下是一个简单的示例，展示如何使用  `v-show` ：
  <template>
    <div>
      <button @click="toggleVisibility">切换显示</button>
      <p v-show="isVisible">这段文字是可见的。</p>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        isVisible: true,
      };
    },
    methods: {
      toggleVisibility() {
        this.isVisible = !this.isVisible;
      },
    },
  };
  </script>
  在这个示例中，点击按钮可以切换段落的可见性。

  总结
  -  `v-show`  指令：用于根据条件控制元素的显示与隐藏。
  - 性能优势：适合频繁切换的场景，性能开销较小。
  - 与  `v-if`  的区别： `v-show`  不会销毁元素，而是通过 CSS 控制显示状态。
  - 使用场景：适合动态内容和频繁切换的场景。
  -->
  <style>
    img {
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>

  <div id="app">
    <h3>1. v-show</h3>
    <p>v-show 不能使用在template上, 因为是在元素上操作style设置为display: none和block</p>
    <div v-show="isShowCode">
      <img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/wzry_qrcode.jpg" alt="">
    </div>

    <h3>2. v-if</h3>
    <template v-if="isShowCode">
      <img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/wzry_qrcode.jpg" alt="">
    </template>

    <div>
      <button @click="toggle">切换</button>
    </div>
  </div>

  <script src="../lib/vue.js"></script>
  <script>
    const { createApp, ref } = Vue

    createApp({
      setup() {
        const isShowCode = ref(true)
        const toggle = () => {
          isShowCode.value = !isShowCode.value
        }
        return {
          isShowCode,
          toggle
        }
      },
    }).mount('#app')

  </script>
  
</body>
</html>